<ion-view left-buttons="leftButtons" class="view-page">
  <ion-nav-title>
    <span class="visible-xs" ng-if="id" ng-bind-html="formData.title"></span>
    <span class="visible-xs" ng-if="!loading && !id" translate>REGISTRY.EDIT.TITLE_NEW</span>
  </ion-nav-title>

  <ion-nav-buttons side="secondary">
      <button class="button button-icon button-clear visible-xs visible-sm"
              ng-class="{'ion-android-send':!id, 'ion-android-done': id}"
              ng-click="save()">
      </button>
  </ion-nav-buttons>

  <ion-content scroll="true">

    <div class="hero">
      <div class="content">
        <i class="avatar"
           ng-class="avatarClass"
           ng-style="avatarStyle">
          <button class="button button-positive button-large button-clear flat icon ion-camera visible-xs visible-sm"
                  style="display: inline-block;"
                  ng-click="showAvatarModal()"></button>
          <button ng-if="avatar.src"
                  class="button button-positive button-large button-clear flat  visible-xs visible-sm"
                  style="display: inline-block; left: 85px; bottom:15px;"
                  ng-click="rotateAvatar()">
            <i class="icon-secondary ion-image" style="left: 24px; top: 3px; font-size: 24px;"></i>
            <i class="icon-secondary ion-forward" style="left: 26px; top: -13px;"></i>
          </button>
          <button class="button button-positive button-large button-clear icon ion-camera hidden-xs hidden-sm"
                  ng-click="showAvatarModal()"></button>
        </i>
        <h3 class="dark">
          <span ng-if="!loading && formData.title">{{formData.title}}</span>
          <span ng-if="!loading && !id && !formData.title" translate>REGISTRY.EDIT.TITLE_NEW</span>
        </h3>
        <h4 class="dark">
          <ion-spinner ng-if="loading" icon="android"></ion-spinner>
        </h4>
      </div>
    </div>

      <div class="row no-padding">

        <div class="col col-20 hidden-xs hidden-sm">&nbsp;</div>

        <div class="col no-padding-xs">

          <form name="recordForm" novalidate="" ng-submit="save()">
            <div class="list {{::motion.ionListClass}}"
                 ng-init="setForm(recordForm)">
              <div class="item" ng-if="id">
                <h4 class="gray">
                  <i class="icon ion-calendar"></i>
                  {{'COMMON.LAST_MODIFICATION_DATE'|translate}}&nbsp;{{formData.time | formatDate}}
                </h4>
                <div class="badge badge-balanced badge-editable" ng-click="showRecordTypeModal()">
                  {{'REGISTRY.TYPE.ENUM.'+formData.type|upper|translate}}
                </div>
              </div>

              <!-- pictures -->
              <ng-include src="'plugins/es/templates/common/edit_pictures.html'"></ng-include>

              <div class="item item-divider" translate>REGISTRY.GENERAL_DIVIDER</div>

              <!-- title -->
              <div class="item item-input item-floating-label"
                   ng-class="{'item-input-error': form.$submitted && form.title.$invalid}">
                <span class="input-label" translate>REGISTRY.EDIT.RECORD_TITLE</span>
                <input type="text" placeholder="{{'REGISTRY.EDIT.RECORD_TITLE_HELP'|translate}}"
                       name="title"
                       id="registry-record-title"
                       ng-model="formData.title"
                       ng-minlength="3"
                       ng-required="true"/>
              </div>
              <div class="form-errors"
                   ng-if="form.$submitted && form.title.$error"
                   ng-messages="form.title.$error">
                <div class="form-error" ng-message="required">
                  <span translate="ERROR.FIELD_REQUIRED"></span>
                </div>
                <div class="form-error" ng-message="minlength">
                  <span translate="ERROR.FIELD_TOO_SHORT"></span>
                </div>
              </div>

              <!-- description -->
              <div class="item item-input item-floating-label">
                <span class="input-label" translate>REGISTRY.EDIT.RECORD_DESCRIPTION</span>
                <textarea placeholder="{{'REGISTRY.EDIT.RECORD_DESCRIPTION_HELP'|translate}}"
                          ng-model="formData.description"
                          rows="8" cols="10">
                </textarea>
              </div>

              <!-- category -->
              <div class="item item-icon-right ink"
                   ng-if="loading || formData.type==='company' || formData.type==='shop'"
                   ng-class="{'item-input-error': form.$submitted && !formData.category.id, 'done in': !loading}"
                   ng-click="showCategoryModal()">
                <span translate>REGISTRY.CATEGORY</span>
                <span class="badge badge-royal">{{formData.category.name | formatCategory}}</span>&nbsp;
                <i class="gray icon ion-ios-arrow-right"></i>
              </div>
              <input type="hidden" name="category" ng-model="formData.category.id" required-if="formData.type=='company' || formData.type=='shop'">
              <div class="form-errors"
                   ng-if="form.$submitted && form.category.$error"
                   ng-messages="form.category.$error">
                <div class="form-error" ng-message="required">
                  <span translate="ERROR.FIELD_REQUIRED"></span>
                </div>
              </div>

              <!-- position -->
              <ng-include src="'plugins/es/templates/common/edit_position.html'"></ng-include>

              <!-- social networks -->
              <ng-include src="'plugins/es/templates/common/edit_socials.html'" ng-controller="ESSocialsEditCtrl"></ng-include>

              <div class="item item-divider" translate>REGISTRY.TECHNICAL_DIVIDER</div>

              <!-- pubkey  -->
              <div class="item item-input item-floating-label">
                <span class="input-label" translate>REGISTRY.EDIT.RECORD_PUBKEY</span>
                <input type="text" placeholder="{{'REGISTRY.EDIT.RECORD_PUBKEY_HELP'|translate}}" ng-model="formData.pubkey"/>
              </div>

            </div>

            <div class="padding hidden-xs hidden-sm text-right">
              <button class="button button-clear button-dark ink" ng-click="cancel()" type="button" translate>
                COMMON.BTN_CANCEL
              </button>
              <button class="button button-positive button-raised ink" type="submit" ng-if="!id" translate>
                COMMON.BTN_PUBLISH
              </button>
              <button class="button button-assertive button-raised ink" type="submit" ng-if="id" translate>
                COMMON.BTN_SAVE
              </button>
            </div>
          </form>
        </div>

        <div class="col col-20 hidden-xs hidden-sm">&nbsp;</div>

      </div>
    </div>
  </ion-content>
</ion-view>
